import { Card, Tree } from "antd"
import type { DataNode } from 'antd/es/tree';
import { ClusterOutlined, ApiOutlined, DesktopOutlined } from '@ant-design/icons';
import React from "react";
import { useModel } from 'umi';

export default (props) => {

  const {routers, hosts} = useModel('networkModel')

  const onSelect = (selectedKeys: React.Key[], info: any) => {
    console.log('selected', selectedKeys, info);
  };
  const treeData: DataNode[] = [
    {
      title: 'Network Devices',
      key: '0-0',
      children: Object.values(routers).map(router => ({
        title: router.id,
        key: router.id,
        icon: <ClusterOutlined />,
      })),
    },
    {
      title: 'Terminal Devices',
      key: '0-1',
      children: Object.values(hosts).map(router => ({
        title: router.id,
        key: router.id,
        icon: <DesktopOutlined />,
      })),
    },
    // {
    //   title: 'Links',
    //   key: '0-2',
    //   children: [
    //     {
    //       title: 'parent 2-0',
    //       key: '0-2-0',
    //       icon: <ApiOutlined />,
    //     },
    //   ],
    // },
  ];

  return (
    <Card size='small' title='Network Elements' style={{ height: 'calc(100% - 38px)', maxHeight: '100%', overflow: 'hidden' }} styles={{body:{height: 'calc(100% - 38px)',marginTop: 1, overflowY: 'scroll'}}}>
      <Tree
        showLine={true}
        showIcon={true}
        defaultExpandedKeys={['0-0']}
        onSelect={onSelect}
        treeData={treeData}
      />
    </Card>
  )
}